<template>
	<view class="content">
		<image mode="widthFix"
			src="/static/logo-back.png">
		</image>
		<view class="logo">
			<image src="/static/home/货源.png"></image>
		</view>
		<view class="form-box">
			<uni-forms ref="baseForm" :model="preFormData">
				<text class="title">预购网</text>
				<uni-forms-item class="row-input" label="姓名:" required>
					<uni-easyinput v-model="preFormData.name" :inputBorder="false"  placeholder="请输入姓名"/>
				</uni-forms-item>
				<uni-forms-item class="row-input" label="手机号:" required>
					<uni-easyinput v-model="preFormData.registPhone" :inputBorder="false" placeholder="请输入手机号"/>
				</uni-forms-item>
				<!-- <view class="menu-link">
					<text @click="goToRegister">无账号注册</text>
				</view> -->
				<text class="tipText">平台无任何收费项。<text
						style="color:rgba(252, 151, 195, 0.6)">为保护安全隐私，请勿泄露您的账号密码！</text></text>
			</uni-forms>
			<button class="login-btn" type="primary" @click="submit('baseForm')">登录/注册</button>
		</view>
	</view>
</template>

<script>
	import graceChecker from '@/common/graceChecker.js'
	import utils from '@/utils/requset.js'
	import operate from '@/common/operate.js'
	import app from '@/App.vue'
	export default {
		data() {

			return {
				// 基础表单数据
				preFormData: {
					name: '',
					registPhone: '',
				},

			}
		},

		onLoad() {
			app.navTitle();
		},
		onShow(e) {
			 app.navTitle();
		},
		methods: {
			//注册页面
			// goToRegister() {
			// 	uni.navigateTo({
			// 		url: '/pages/loginOnlyPhone/regist'
			// 	})
			// },
			submit(ref) {
				const phonrRule = [{
					name: "registPhone",
					checkType: "phoneno",
					errorMsg: "联系手机号码格式不正确"
				}];
				const nameRule = [{
					name: "name",
					checkType: "notnull",
					errorMsg: "姓名不可为空,请你输入您的姓名！"
				}];
				let checkResName = graceChecker.check(this.preFormData, nameRule);
				console.log('checkResName:', checkResName);
				if (checkResName) {

				} else {
					uni.showModal({
						title: '姓名不可为空',
						content: nameRule[0].errorMsg,
						showCancel: false,
					})
					return
				}
				//验证手机号格式
				let checkRes = graceChecker.check(this.preFormData, phonrRule)
				if (checkRes) {
					//验证通过
					console.log('传递参数为：' + JSON.stringify(this.preFormData));
					var data = this.preFormData
					console.log('checkRes:', checkRes);
					//todo 调用接口传递数据
					var header = {},
						url = "/purchase/preUser/update",
						method = "POST";
					if (method) {
						method = method.toUpperCase();
						if (method == "POST") {
							header = {
								'Content-Type': "application/json"
							};
						} else {
							header = {
								'Content-Type': "application/json"
							};
						}
					}

					uni.request({
						url: operate.api + url,
						data: data,
						method: method,
						header: header,
						success: (res) => {
							if (res.statusCode && res.statusCode == 200) {
								uni.setStorageSync("userInfo", res.data.data);
								var content = '注册成功';
								if (res.data.data.newUser) {
									uni.showModal({
										title: '欢迎来到预购网，共赢互利诚信，无限商机，免费提供',
										content: content,
										success: function(res) {
											uni.reLaunch({
												url: '/pages/tabbar/tabbar-1/tabbar-1'
											})
										}
									})
								} else {
									content = '登录成功，欢迎回来';
									uni.reLaunch({
										url: '/pages/tabbar/tabbar-1/tabbar-1'
									})
								}

							} else {
								console.log("数据状态码！=200")
							}

						}
					})
				} else {
					uni.showModal({
						title: '手机格式不正确',
						content: phonrRule[0].errorMsg,
						showCancel: false,
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	image {
		width: 100%;
		height: 100%;
	}

	.logo {
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		font-size: 40rpx;
		color: #81d7cf;
		position: fixed;
		top: 200rpx;
		left: 300rpx;
		width: 150rpx;
		height: 150rpx;
		background-color: #FFFFFF;
		border-radius: 100%;
	}

	.form-box {
		position: fixed;
		top: 450rpx;
		right: 150rpx;
		left: 150rpx;


		.title {
			font-size: 50rpx;
			font-weight: bold;
			letter-spacing: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 10px;
		}

		.row-input {
			display: flex;
			justify-content: flex-start;
			align-items: flex-end;
			height: 120rpx;
			
			border-bottom: 1rpx solid #c9e6e3;

			input {
				flex: 1;
				font-size: 30rpx;
			}
		 
		}
		.row-input .uni-forms-item__label{
				width: 10px;
		}
		.menu-link {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 50rpx;
			font-size: 26rpx;
			color: #81d7cf;
		}

		.login-btn {
			margin-top: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			width: 100%;
			font-size: 32rpx;
			background-color: #43cf7c;
			color: #FFFFFF;
			border-radius: 30rpx;
		}

		.tipText {
			font-size: 10rpx;
		}
	}
</style>
